<script setup>
import {ref, onBeforeMount, watchEffect} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import 'vant/es/image-preview/style'
import {showConfirmDialog, showImagePreview} from "vant";
import useOrderStore from "@/store/modules/OrderStore.js";
import {elErrorMessageTip, elSuccessMessageTip} from "@/utils/MessageTipUtils.js";
import {PAY_ROUTE} from "@/router/routes/order/pay.js";
import {payOrderAPI} from "@/api/order.js";

const router = useRouter()
const route = useRoute()

const goBack = () => {
  showConfirmDialog({
    message: '是否确认放弃支付订单'
  }).then(() => {
    // on confirm
    router.back()
  }).catch(() => {
    // on cancel
  });
}

const payByWe = ref(false)
const payByAli = ref(false)
const onOpenPayByWe = () => {
  payByWe.value = true
}
const onOpenPayByAli = () => {
  payByAli.value = true
}
const payHandler = async () => {
  const orderIdList = useOrderStore().orderIdList
  for (let orderId of orderIdList) {
    const res = await payOrderAPI(orderId, 2)
    if (!res.status) {
      elErrorMessageTip(res.msg)
      return
    }
  }
  elSuccessMessageTip("订单支付成功")
  router.back()
}
const onClosePayByWe = () => {
  payByWe.value = false
  payHandler()
}
const onClosePayByAli = () => {
  payByAli.value = false
  payHandler()
}
</script>

<template>
  <div class="pay">
    <van-nav-bar :title="'支付'" left-text="返回" left-arrow fixed @click-left="goBack" placeholder/>
    <van-cell title="微信支付" is-link @click="onOpenPayByWe"/>
    <van-cell title="支付宝" is-link @click="onOpenPayByAli"/>
    <van-overlay :show="payByWe" @click="onClosePayByWe">
      <div class="w-screen h-screen flex-center">
        <div class="w-56 rounded-2xl overflow-hidden" @click.stop>
          <img class="w-full h-full object-contain" src="@/assets/imgs/PayByWeChat.png" alt="">
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="payByAli" @click="onClosePayByAli">
      <div class="w-screen h-screen flex-center">
        <div class="w-56 rounded-2xl overflow-hidden" @click.stop>
          <img class="w-full h-full object-contain" src="@/assets/imgs/PayByAli.jpg" alt="">
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<style scoped lang="scss">

</style>